<script setup lang="ts">
import { useRouter } from 'vue-router'
import { computed } from 'vue'
const router = useRouter()
const currentPath = computed(() => router.currentRoute.value.path)

const routerList = router.getRoutes().filter((item) => item.meta?.isShow)
console.log(routerList)
</script>

<template>
    <div class="home">
        <el-container>
            <el-header class="home-header">
                <el-row>
                    <el-col :span="2">
                        <img src="../assets/heart.png" class="home-logo" />
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content ep-bg-purple">
                            <h3>后台管理系统</h3>
                        </div>
                    </el-col>
                    <el-col :span="2" :offset="14">
                        <el-button type="primary">退出登录</el-button>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu class="home-menu" router :default-active="currentPath">
                        <el-menu-item v-for="item in routerList" :key="item.path" :index="item.path" >{{ item.meta?.title }}</el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style lang="scss" scoped>
.home {
    height: 100vh;

    .home-header {
        height: 60px;
        line-height: 60px;
        background-color: #e2e4e4;
    }

    .home-logo {
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 20px;
        color: #303133;
    }

    .home-menu {
        height: calc(100vh - 60px);
    }

    .el-menu {
        border: none;
    }

    .el-main {
        background-color: #f5f7fa;
    }
}
</style>